<template>
    <div class="flexbetween">
        <div class="tabsMainDetail">
            <el-row :gutter="10">
                <template v-if="type == 'person'">
                    <el-form ref="form" :model="form" label-width="90px">
                        <el-col :span="6">
                            <el-form-item label="手机号">
                                <el-input size="small" v-model="form.contactsPhone" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="姓名">
                                <el-input size="small" v-model="form.contactsName" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="认证状态">
                                <el-select size="small" v-model="form.isAuth">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="未认证" value="0"></el-option>
                                    <el-option label="已认证" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </template>
                <template v-if="type == 'pact'">
                    <!-- 筛选 -->
                    <el-form ref="form" :model="form1" label-width="80px">
                        <el-row :gutter="10">
                            <el-col :span="5">
                                <el-form-item label="合同名称">
                                    <el-input v-model="form1.contractName" placeholder="请输入合同名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <div class="zdykk">
                                    <el-form-item label="人员名称">
                                        <el-input v-model="form1.participantsName" :placeholder="selectData == 1 ? '请输入姓名' : '请输入企业名'">
                                            <!-- <template #append>
                                                    <el-select v-model="selectData" placeholder=" ">
                                                        <el-option v-for="(item, index) in option1" :key="index" :label="item.label"
                                                            :value="item.value"></el-option>
                                                    </el-select>
                                                </template> -->
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!-- <el-col :span="5">
                                        <el-form-item label="账号查找">
                                            <el-input v-model="form.name" placeholder="请输入手机号"></el-input>
                                        </el-form-item>
                                    </el-col> -->
                            <el-col :span="5">
                                <el-button type="primary" @click="search">搜索</el-button>
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="seledown = seledown ? 0 : 1">
                                    <i class="el-icon-arrow-down" v-show="seledown == 0"></i>
                                    <i class="el-icon-arrow-up" v-show="seledown == 1"></i>
                                </el-button>
                            </el-col>
                        </el-row>
                        <template v-if="seledown == 1">
                            <el-row :gutter="10">
                                <el-col>
                                    <el-form-item label="签署状态">
                                        <li class="pointer itemlable"
                                            :class="form1.contractSignState == item.value ? 'focus' : ''"
                                            v-for="item in arr" :key="item.value"
                                            @click="form1.contractSignState = item.value">{{ item.name }}</li>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="10">
                                    <el-form-item label="合同时间">
                                        <el-select v-model="selectData2" placeholder="请选择">
                                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </template>
                    </el-form>
                </template>
            </el-row>
        </div>
        <div class="btnMain" v-if="type == 'person'">
            <el-button size="small" type="primary" @click="search()">搜索</el-button>
            <el-button size="small">重置</el-button>
            <template v-if="type == 'unit'">
                <el-button @click="changeShow(1)" v-if="show" size="small" icon="el-icon-d-arrow-left"
                    class="active close"></el-button>
                <el-button @click="changeShow(2)" v-if="!show" size="small" icon="el-icon-d-arrow-right"
                    class="active open"></el-button>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    props: ['type'],
    data() {
        return {
            form: {
                contactsName: '',
                contactsPhone: "",
                isAuth: "",
            },
            form1: {
                contractName: '',
                participantsName: '',
                contractSignState: '',
                launchTimeEnd: '',
                launchTimeStart: "",
                signTimeEnd: '',
                signTimeStart: "",
            },
            arr: [
                { value: "", name: "全部" },
                { value: "0", name: "签署中" },
                { value: "1", name: "签署完成" },
                { value: "2", name: "拒绝签署" },
                { value: "3", name: "解除中" },
                { value: "4", name: "解除完成" },
                { value: "5", name: "拒绝解除" },
                { value: "6", name: "已撤回" },
                { value: "7", name: "已过期" },
            ],
            option1: [{
                label: "按个人查找",
                value: "1",
            },
            {
                label: "按企业查找",
                value: "2",
            },],
            options2: [
                {
                    label: "全部",
                    value: "1",
                },
                {
                    label: "按发起时间筛选",
                    value: "2",
                },

                {
                    label: "按完成时间筛选",
                    value: "3",
                },
            ],
            selectData: "1",
            selectData2: "1",
            seledown: 0,//筛选是否全部展示
            value2: [],//开始时间-结束时间
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

            show: true,
        }
    },
    watch: {
        value2(newval) {
            if (this.selectData2 == 1) {
                this.form1.launchTimeEnd = Number(this.value2[1])
                this.form1.launchTimeStart = Number(this.value2[0])
                this.form1.signTimeEnd = Number(this.value2[1])
                this.form1.signTimeStart = Number(this.value2[0])
            }
            if (this.selectData2 == 2) {
                this.form1.launchTimeEnd = Number(this.value2[1])
                this.form1.launchTimeStart = Number(this.value2[0])
                this.form1.signTimeEnd = ""
                this.form1.signTimeStart = ""
            }
            if (this.selectData2 == 3) {
                this.form1.launchTimeEnd = ""
                this.form1.launchTimeStart = ""
                this.form1.signTimeEnd = Number(this.value2[1])
                this.form1.signTimeStart = Number(this.value2[0])
            }
        }
    },
    methods: {
        search() {
            if (this.type == "person") {
                this.$bus.$emit('getPersonsearch', this.form)
            }
            if (this.type == "pact") {
                this.$bus.$emit('getinfoht', this.form1)
            }
        },
         reset() {
            if (this.type == "person") {
                for (var key in this.form) {
                    this.form[key] = "";
                }
                this.$bus.$emit('getPersonsearch', this.form)
            }
            if (this.type == "pact") {
                for (var key in this.form1) {
                    this.form1[key] = "";
                }
                this.$bus.$emit('getinfoht', this.form1)
            }
            this.selectData2 = "1"
            this.value2 = []
        },
        changeShow(type) {
            if (type == 1) {
                this.show = false
            } else if (type == 2) {
                this.show = true
            }
        }
    }
}
</script>

<style lang="scss">
.tabsMainDetail {
    .el-date-editor--daterange.el-input__inner {
        width: 100%;
    }

    .el-form-item {
        margin-bottom: 16px;
    }

    .el-button--mini {
        padding: 5px 7px;
    }

    .el-form-item__content {
        display: flex;
    }

    .zdykk .el-form-item__label {
        width: 85px !important;
    }

    .zdykk .el-form-item__content {
        margin-left: 85px !important;
    }
}
</style>

<style lang="scss" scoped>
.tabsMainDetail {
    width: 70%;

    .itemlable {
        padding: 5px 8px;
        border: 1px solid rgba(0, 0, 0, .1);
        font-size: 16px;
        display: inline-block;
        margin-right: 10px;
        margin-top: 5px;
        line-height: 16px;
        color: #999;
    }

    .focus {
        border: 1px solid #409eff;
        color: #409eff;
    }
}

.btnMain {
    align-self: flex-start;
    padding-right: 20px;

    .active {
        transform: rotate(90deg);
        padding-left: 9px;
        padding-right: 9px;
    }
}
</style>